import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion as m } from "framer-motion"; import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import { useRouter } from "next/router"; import "react-loading-skeleton/dist/skeleton.css"; import Link from "next/link"; import Navbar from "../../components/navbar"; import Head from "next/head"; import Footer from "../../components/footer"; import { useAniList } from "../../lib/useAnilist"; const genre = [ "Action", "Adventure", "Cars", "Comedy", "Drama", "Fantasy", "Horror", "Mahou Shoujo", "Mecha", "Music", "Mystery", "Psychological", "Romance", "Sci-Fi", "Slice of Life", "Sports", "Supernatural", "Thriller", ]; const types = ["ANIME", "MANGA"]; const sorts = [ "POPULARITY_DESC", "POPULARITY", "TRENDING_DESC", "TRENDING", "UPDATED_AT_DESC", "UPDATED_AT", "START_DATE_DESC", "START_DATE", "END_DATE_DESC", "END_DATE", "FAVOURITES_DESC", "FAVOURITES", "SCORE_DESC", "SCORE", "TITLE_ROMAJI_DESC", "TITLE_ROMAJI", "TITLE_ENGLISH_DESC", "TITLE_ENGLISH", "TITLE_NATIVE_DESC", "TITLE_NATIVE", "EPISODES_DESC", "EPISODES", "ID", "ID_DESC", ]; export default function Card() { const router = useRouter(); const { aniAdvanceSearch } = useAniList(); const [data, setData] = useState(); const [loading, setLoading] = useState(true); let hasil = null; let tipe = "ANIME"; const query = router.query; if (query.param !== "anime" && query.param !== "manga") { hasil = query.param; } else if (query.param === "anime") { hasil = null; tipe = "ANIME"; } else if (query.param === "manga") { hasil = null; tipe = "MANGA"; } // console.log(hasil); const [search, setQuery] = useState(hasil); const [type, setSelectedType] = useState(tipe); const [seasonYear, setSeasonYear] = useState(); const [season, setSeason] = useState(); const [genres, setSelectedGenre] = useState(); const [perPage, setPerPage] = useState(25); const [sort, setSelectedSort] = useState(["POPULARITY_DESC"]); const [isVisible, setIsVisible] = useState(false); const inputRef = useRef(null); async function advance() { setLoading(true); const data = await aniAdvanceSearch( search, type, seasonYear, season, genres, perPage, sort ); setData(data); setLoading(false); } useEffect(() => { advance(); }, [search, type, seasonYear, season, genres, perPage, sort]); const handleKeyDown = async (event) => { if (event.key === "Enter") { event.preventDefault(); const inputValue = event.target.value; if (inputValue === "") { setQuery(null); } else { setQuery(inputValue); } } }; function trash() { setQuery(null); inputRef.current.value = ""; setSelectedGenre(null); setSelectedSort(["POPULARITY_DESC"]); } function handleVisible() { setIsVisible(!isVisible); } function handleTipe(e) { setSelectedType(e.target.value); router.push(`/search/${e.target.value.toLowerCase()}`); } // console.log(genres); return ( <> Moopa - search

TITLE

{/* TYPE */}

TYPE

{/* SORT */}

SORT

{/* OPTIONS */}

{/* TRASH ICON */}

{isVisible && (

GENRE

TYPE

SORT

)}

{loading ? ( <> {[1, 2, 4, 5, 6, 7, 8].map((item) => (

))} ) : data && data.media.length === 0 ? (

Oops!

Nothing's Found...

) : ( data.media.map((anime) => { return (

{anime.status === "RELEASING" ? ( ) : anime.status === "NOT_YET_RELEASED" ? ( ) : null} {anime.title.userPreferred}

{anime.format ||
-
} ·{" "} {anime.status ||
-
} · {anime.episodes || 0}{" "} Episodes

); }) )}

); }